<script setup lang="ts" name="ExternalToolsDrawer">
import Keyboards from './drawer/keyboards.vue'
import Events from './drawer/events.vue'
const visible = ref(false)
const type = ref('')
const EventsRef = ref(null)
const showDrawer = async (v) => {
  visible.value = true
  type.value = v
  if (v === 'event') {
    await nextTick()
    EventsRef.value.initData()
  }
}
defineExpose({ showDrawer })
</script>

<template>
  <el-drawer class="flow-chart-drawer" v-model="visible" direction="rtl" size="600px">
    <template #header>
      <h2>{{ type === 'event' ? '查看bpmn事件' : '键盘快捷键' }}</h2>
    </template>
    <template #default>
      <Events v-if="type === 'event'" ref="EventsRef"></Events>
      <Keyboards v-else></Keyboards>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss"></style>
